<template>
  <div class="blog-view">
    <div class="header">
      <div class="left">
          <h1>Hello World</h1>
      </div>
      <div class="right">
        <a-button type="primary">保存</a-button>
      </div>
    </div>
    <md-editor class="md" v-model="source"  />
  </div>
</template>

<script>
import { computed, reactive, toRefs } from "vue";

import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
export default {
  components: { MdEditor },
  setup() {
    const state = reactive({
      count: 0,
      source: "# Hello World!",
    });

    const html = computed(() => {
      return state.source;
    })
    

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
h1{
    font-size: 16px;
}
.blog-view {
  .header {
    width: 100%;
    height: 60px;
    background: white;
    border-bottom: 0.5px solid rgb(224, 224, 224);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      padding: 0px 20px;
    }
    .right {
      padding: 0px 20px;
    }
  }
  .md{
      height:870px;
  }
}
</style>